<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表情包</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2634406_09m3i8p5u9wl.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        margin: 10px auto;
        width: 600px;
        background-color: cornsilk;
    }

    section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 600px;
        height: 520px;
        background-color: #fff;
        margin-bottom: -10px;
    }

    section img {
        width: 500px;
    }

    section i {
        width: 50px;
        height: 520px;
        background-color: brown;
        line-height: 520px;
        color: #D3D3D3;
        background-color: #fff;
        transition: all .5s;
    }

    section i:hover {
        background-color: #D3D3D3;
        color: #fff;
    }

    .icon-jiantouzuo::before {
        content: "\e620";
        font-size: 50px;
    }

    .icon-jiantouyou::before {
        content: "\e61f";
        font-size: 50px;
    }

    footer {
        width: 600px;
        height: 100px;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        padding-top: 10px;
    }

    nav {
        /* width: 600px;
        height: 100px; */
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* overflow: hidden; */
        padding-top: 10px;
        transition: all 1s;
        margin-left: 0;

    }

    .items {
        width: 80px;
        height: 95px;
        border: 2px solid transparent;
        margin-left: 5px;
        background-color: #fff;
        position: relative;
    }

    .on {
        border: 2px solid #303b9e;
    }

    .items:nth-child(1) {
        margin-left: 3px;
    }

    footer img {
        width: 80px;

    }
</style>

<body>
    <main>
        <section>
            <i class="iconfont icon-jiantouzuo"></i>
            <img src="./img/02.webp" alt="">
            <i class="iconfont icon-jiantouyou"></i>
        </section>
    </main>
    <footer>
        <nav>
            <div class="items on"><img src="./img/02.webp" alt=""></div>
            <div class="items"><img src="./img/03.webp" alt=""></div>
            <div class="items"><img src="./img/04.webp" alt=""></div>
            <div class="items"><img src="./img/05.webp" alt=""></div>
            <div class="items"><img src="./img/06.webp" alt=""></div>
            <div class="items"><img src="./img/07.webp" alt=""></div>
            <div class="items"><img src="./img/08.webp" alt=""></div>
            <div class="items"><img src="./img/09.webp" alt=""></div>
            <div class="items"><img src="./img/10.webp" alt=""></div>
            <div class="items"><img src="./img/11.webp" alt=""></div>
            <div class="items"><img src="./img/12.webp" alt=""></div>
            <div class="items"><img src="./img/13.webp" alt=""></div>
        </nav>
    </footer>
</body>
<script>
    var zuo = document.querySelector(".icon-jiantouzuo")
    var you = document.querySelector(".icon-jiantouyou")
    var sectionImg = document.querySelector("section img")
    var num = 2
    var items = document.querySelectorAll(".items")
    var nav = document.querySelector("nav")
    // console.log(items);
    // var imgSuoyin
    // 2, 大轮播点击导航切换图片
    you.onclick = function (e) {
        console.log(sectionImg.src);
        if (num >= 13) return
        num++
        if (num < 10) num = "0" + num
        sectionImg.src = "./img/" + num + ".webp"
        // 3, 大轮播切换时,小轮播对应图片显示边框
        items[num - 3].classList.remove("on")
        items[num - 2].classList.add("on")
        if (num - 2 >= 4 && num - 2 < 9) {
            nav.style.marginLeft = -(num - 5) * 92 + "px"
            console.log(nav.style.marginLeft);
        }
    }
    zuo.onclick = function (e) {
        console.log(sectionImg.src);
        if (num <= 2) return
        num--
        if (num < 10) num = "0" + num
        sectionImg.src = "./img/" + num + ".webp"
        // 3, 大轮播切换时,小轮播对应图片显示边框
        items[num - 1].classList.remove("on")
        items[num - 2].classList.add("on")
        if (num - 2 >= 3 && num - 2 < 9) {
            nav.style.marginLeft = -(num - 5) * 92 + "px"
            console.log(nav.style.marginLeft);
        }
    }
    for (let i = 0; i < items.length; i++) {
        // 5, 点击小轮播时, 给对应图片加边框, 取消其他图片的边框
        // 初始化
        items[i].onclick = function () {
            for (let j = 0; j < items.length; j++) {
                items[j].classList.remove("on")
            }
            // 加边框;
            this.classList.add("on")
            // 改num
            num = i + 2
            if (num < 10) num = "0" + num
            // 改图片
            // 4, 点击小轮播图片,大轮播图片对应
            sectionImg.src = "./img/" + num + ".webp"
            console.log(i);
            // margin-left: -50px;
            if (i < 3) i = 3
            if (i > 8) i = 8
            // if (parseInt(nav.style.marginLeft) > 0) return
            nav.style.marginLeft = -(i - 3) * 92 + "px"
            console.log(nav.style.marginLeft);
        }
    }

    // 6, 点击小轮播图片,让这张图滑动移动到中间
    // console.log(this.scrollLeft);
    // 88
    // items[j].offsetLeft = 250+"px"
    // console.log(this);
    // items[j].style.left = 250 + "px"
</script>

</html>